
window.onload = function() {

	//第一层封装,封装了基本的工具类和方法
	function BaseZhuanPan(cobj) {
		this.cobj = cobj;

		var num = Math.PI / 180; //角度->弧度
		this.convateToHuDu = function(angle) {//角度转弧度
			return num * angle;
		};
        //封装数组迭代
		this.each = function(arr, func) {
			arr.map(func);
		};
		//封装了interval,程序不再依赖interval,再次重构的时候可以更换成settimeout之类的
		this.interval = function(abortif, cleaning, func, time) {//参数:退出条件,退出时要释放的工作,正常情况下的回调,间隔时间
			time = time || 60;
			var _this = this;//需要做转换,this在运行时指向对象本身
			var tag = setInterval(function(argument) {
				if (abortif()) {//如果满足退出条件
					clearInterval(tag);//退出
					cleaning(_this.cobj);//将画板传过去
				} else {
					func(_this.cobj);//将画板传过去

				}
			},
			time);
		};
	}
    //绘制基础静态的情形
	function ZhuanPan(cobj) {

		BaseZhuanPan.call(this, cobj);//继承BaseZhuanPan
		//声明私有属性,良好的封装应该开放外部的扩展参数,此处暂时不理
		var colorArr = ["#24a274", "#2a70a6", "#6d56c3", "#b23880", "#7a9a36", "#b48548", "#397839", "#89489c"]; //颜色数组
		var textArr = ["js", "html", "python", "php", "mysql", "html5", "css3", "nodejs"]; //文本数组
		this.getText = function(angle) {//根据角度获取转盘指向的文字
			return textArr[textArr.length - Math.ceil(angle * textArr.length / 360)];//当前角度计算当前第几格,然后返回当前文字
		};
		this.huaZhuanPan = function(cobj) {//画转盘
			var _this = this;//存储this指针
			this.each(colorArr,//迭代颜色数组
			function(item, i, arr) {//回调方法
				cobj.beginPath();
				cobj.moveTo(0, 0);
				cobj.fillStyle = item;
				cobj.arc(0, 0, 130, _this.convateToHuDu((i - 1) * 45), _this.convateToHuDu(i * 45));//调用base对象的方法,开始弧度和结束弧度相差45度
				cobj.closePath(); //闭合路径
				cobj.stroke();//描边
				cobj.fill();//填充
			});
		};
		
		this.huaXiaoZhuanPan = function(cobj) {//画白色圆盘
			cobj.beginPath();
			cobj.fillStyle = "#fff";
			cobj.arc(0, 0, 60, 0, 2 * Math.PI);
			cobj.fill();
		};
		this.huaFont = function(cobj) {//画文字
			var _this = this;
			this.each(textArr,//迭代文本数组
			function(item, i, arr) {
				cobj.save();//旋转之前保存环境
				cobj.beginPath();
				cobj.rotate(_this.convateToHuDu(i * 45 + 20));//旋转45度+文字居中
				cobj.fillStyle = "#222"; //黑色
				cobj.font = "15px 微软雅黑";
				cobj.fillText(item, 75, 0);//填充文字,水平移动75
				cobj.restore();//旋转之后清除记忆
			});
		};

		this.baseConvas = function(cobj) {//基础绘制,静态状态
			//画转盘
			this.huaZhuanPan(cobj);
			//绘制白色圆盘
			this.huaXiaoZhuanPan(cobj);
			//画字体
			this.huaFont(cobj);
		};
		

	}
	//最后真正实现转圈方法的实例对象
	function MyZhuangPan (cobj) {
		
		this.zhuanQuan = function() {
			var step = 10 + 10 * Math.random();//旋转速度
			var angle = 0,//初始角度
			_this = this;
			this.interval(function() {//停止的条件
				return step <= 0.3;
			},
			function(cobj) {//停止时的处理
				cobj.font = "18px 微软雅黑";
				cobj.textAlign = "center";
				cobj.fillText(_this.getText(angle), 0, 0);//白盘显示最终被选中的文本
			},
			function(cobj) {//正常时候转圈的效果
				angle >= 360 && (angle = 0);//角度大于1圈归零
				step *= 0.95;//速度减慢
				angle += step;//角都累加
				cobj.clearRect( - 200, -200, 500, 500);//清除画板
				cobj.beginPath();
				//画一条水平线
				cobj.lineWidth = 5;
				cobj.moveTo(135, 0);
				cobj.lineTo(150, 0);
				cobj.stroke();
				//旋转角度重画画板
				cobj.lineWidth = 2;
				cobj.save();
				cobj.rotate(_this.convateToHuDu(angle));
				_this.baseConvas(cobj);//绘制画板
				cobj.restore();
			});
		};
	}
	var canvas = document.getElementById("canvas");
	var cobj = canvas.getContext("2d"); //获取画笔
	var btn = document.getElementById("btn"); //获取按钮

	cobj.translate(250, 250); //画板平移

	MyZhuangPan.prototype = new ZhuanPan(cobj);//原型链继承
	MyZhuangPan.prototype.constructor=MyZhuangPan;//还原构造器

	var zp = new MyZhuangPan(cobj);//实例化转盘
	zp.zhuanQuan(cobj);//运行转盘

}